<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>动画旋转效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 设置动画在页面中的位置 */
        .nav {
            position: relative;
            width: 660px;
            height: 410px;
            margin: 0 auto;
        }
        /* 设置云朵大小 */
        .pic {
            width: 640px;
            height: 390px;
        }
        /* 设置风车盒子元素相对于最近的定位祖先元素进行定位 */
        .nav1 {
            position: absolute;
            left: 230px;
            top: 120px;
            /* margin: 0 auto; */
        }
        /* 设置风车图片大小及旋转速度 */
        .pic1 {
            /* margin: 0 auto; */
            width: 260px;
            height: 260px;
            -webkit-transform: rotate(360deg);
            animation: rotation 3s linear infinite;
            -moz-animation: rotation 3s linear infinite;
            -webkit-animation: rotation 3s linear infinite;
            -o-animation: rotation 3s linear infinite;
        }

        @-webkit-keyframes rotation {
            from {
                -webkit-transform: rotate(0deg);
            }

            to {
                -webkit-transform: rotate(360deg);
            }
        }
        /* 风车中心点设置及元素相对于最近的定位祖先元素进行定位 */
        .core {
            position: absolute;
            left: 100px;
            top: 105px;
            width: 30px;
            height: 30px;
            background-image: linear-gradient(rgb(197, 197, 197), rgb(246, 246, 246));
            border: 12px solid rgb(239, 239, 239);
            border-radius: 30px;
        }

    </style>
</head>

<body>
    <!--云朵-->
    <div class="nav">
        <img class="pic" src="bg02.jpg" alt="">
        <!--风车-->
        <div class="nav1">
            <img class="pic1" src="fc.png" alt="">
            <!--风车中心点-->
            <div class="core">
            </div>
        </div>
    </div>

</body>

</html>